import React from 'react'
import { BASE_URL } from 'utils/config'
import styles from './index.module.scss'
import { withRouter } from 'react-router-dom'

class HouseItem extends React.Component {
  render() {
    const { item, style } = this.props
    return (
      <div
        className={styles.house}
        style={style}
        onClick={() => this.props.history.push(`/detail/${item.houseCode}`)}
      >
        <div className="imgWrap">
          <img className="img" src={BASE_URL + item.houseImg} alt="" />
        </div>
        <div className="content">
          <h3 className="title">{item.title}</h3>
          <div className="desc">{item.desc}</div>
          <div>
            {item.tags.map((tag, index) => {
              const tagClassName = 'tag tag' + ((index % 3) + 1)
              return (
                <span key={tag} className={tagClassName}>
                  {tag}
                </span>
              )
            })}
          </div>
          <div className="price">
            <span className="priceNum">{item.price}</span> 元/月
          </div>
        </div>
      </div>
    )
  }
}

export default withRouter(HouseItem)
